<template>
	<view class="swiper-box">
		<!-- 轮播图 -->
		<swiper class="swiper" :vertical="vertical" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :duration="duration" @change="change">
			<swiper-item v-for="item in options">
				<view class="swiper-item">
					<image :src="item.image" mode="widthFix"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="current-warp">
			{{current}}/{{options.length}}
		</view>
		<view class="user-random">
			<mySwiper size="sm"></mySwiper>
		</view>
	</view>
</template>

<script>
	import mySwiper from "@/components/my-swiper/my-swiper-t.vue"
	export default {
		name:"my-swiper",
		components:{mySwiper},
		props:{
			duration:{
				type:Number,
				default:500
			},
			autoplay:{
				type:Boolean,
				default:true
			},
			indicatorDots:{
				type:Boolean,
				default:false
			},
			vertical:{
				type:Boolean,
				default:false
			},
			options:{
				type:Array,
				default:()=>{
					return [
						{
							title:"A",
							img:"https://img.quanminyanxuan.com/other/3a3c91be42af47faa4d06dbb9bf2d657.jpg"
						},
						{
							title:"B",
							img:"https://img.quanminyanxuan.com/excel/0327eb30d9bd4b5591629db25fd2a418.jpg"
						},
						{
							title:"C",
							img:"https://img.quanminyanxuan.com/excel/9047554265c14e74bbe6a1bf03208cf2.jpg"
						},
						{
							title:"B",
							img:"https://img.quanminyanxuan.com/excel/0327eb30d9bd4b5591629db25fd2a418.jpg"
						},
						{
							title:"C",
							img:"https://img.quanminyanxuan.com/excel/9047554265c14e74bbe6a1bf03208cf2.jpg"
						}
					]
				}
			}
		},
		data() {
			return {
				current:1
			};
		},
		methods:{
			change(e){
				this.current = e.detail.current+1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper{
		width: 100%;
		height: 100vw;
		.swiper-item{
			width: 100%;
			height: 100%;
		}
	}
	.swiper-box{
		position: relative;
	}
	.current-warp{
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, .5);
		color: #fff;
		border-radius: 50%;
		font-weight: bold;
		position: absolute;
		bottom: 20rpx;
		right: 20rpx;
	}
	.user-random{
		width: 70%;
		height: 25px;
		background-color: rgba(0, 0, 0, .5);
		border-radius: 0 25px 25px 0;
		position: absolute;
		left: 0;
		bottom: 80rpx;
		padding-left: 20rpx;
	}
</style>